<template>
  <div>
<!--      图片显示--图片容器中包含着菜单和账户登录功能-->
      <div class="cnet" background="this.backImg">
<!--          二维码登录功能和账户登录功能-->
          <div class="menu">
<!--              商城不会以任何理由要求您转账汇款，谨防诈骗。-->
              <div class="menu_text">
<!--                  <img :src="this.$store.state.logo.img.top2_img">-->
                  <p>{{this.codeMsg.warnMsg}}</p>
              </div>

              <div class="menu_cent">
<!--                  两个选择文字- 扫描二维码和账号登录-->
                  <div class="menu_chose" id="menu_chose">
<!--                      扫码登录-->
                      <div class="chose_code" style="cursor:pointer" @click="change('MailLogin')" >
                            <a ></a>
                      </div>
<!--                      竖线-->
                      <div id="menu_boderoo">

                      </div>
                      <div class="chose_account" style="cursor:pointer" @click="change('AccountLogin')">
                            <a >{{this.codeMsg.AccountMsg}}</a>
                      </div>
                  </div>
<!--                  二维码登录！！图片！！和账户的登录-->
                  <component :is="this.sub.comName"></component>

              </div>
<!--              菜单登录的 下侧 的框-->
              <div class="menu_bottom">
                  <div class="menu_bottom_img" id="menu_bottom_img">
                  </div>
<!--                  立即注册 -->
                  <div class="menu_bottom_enroll">
                      <div>
                          <b></b>
                          <a href="/#/enrollview">{{this.codeMsg.enrollmsg}}</a>
                      </div>
                  </div>

              </div>
          </div>
      </div>
  </div>

</template>

<script>
import AccountLogin from "@/components/login/subassembly/accountLogin.vue";
import MailLogin from "@/components/login/subassembly/mailLogin.vue";

export default {
    name: "CentLogin",
    components: {
        AccountLogin
    },
    data(){
        return{
            sub:{
                comName:AccountLogin
            },
            codeMsg:{
                warnMsg:'商城不会以任何理由要求您转账汇款，谨防诈骗。',
                codesMsg:'邮箱登录',
                AccountMsg:'账号登录',
                enrollmsg:'立即注册'
            },
            backImg:require('@/assets/bckground/back2.jpg')
        }
    },
    methods: {
// 选择填写框的颜色变换
        change(newValue){
            this.sub.comName=newValue;
            var asub=document.getElementById('menu_chose').getElementsByTagName('a');
            if(newValue=='MailLogin'){
                asub[0].style.color='#e4393c';
                asub[1].style.color='';
            }else if(newValue=='AccountLogin'){
                asub[0].style.color='';
                asub[1].style.color='#e4393c';
            }
        },
//注册页面页面跳转
        goenrollview(){
            this.$router.push({path:'/enrollview'});
        }
    },
    created() {

    },
    mounted() {

    },
    //监听外部参数实时更新子组件内部变量
    watch: {
        immediate: true,
    },
}
</script>

<style scoped>
/*中间--总*/
.cnet{
    display: flex;
    justify-content: flex-end;
    width: 990px;
    height: 475px;
    /* !*当内容高度大于图片高度时，背景图像的位置相对于viewport固定*!*/
    /*background-attachment: inherit;*/
    /*!* 让背景图基于容器大小伸缩 *!*/
    /*background-size: cover;*/
    /*background-image: url('@/assets/bckground/IMG6.jpg');*/
}


/*中间的登录菜单--总*/
/*overflow: hidden;overflow: hidden;overflow: hidden;overflow: hidden;overflow: hidden;*/
.menu{
    overflow: hidden;
    position: relative;
    top: 8px;
    left: 0px;
    width: 350px;
    min-height: 390px;
    /*height: 600px;*/
    height: 407px;
    max-height: 440px;
    background-color: #ffffff;
    border-radius: 20px 20px 20px 20px;
    /*background-color: #42b983;*/
    /*opacity: 0.9;*/
}
/*登录菜案*/
.menu_text{
    background-color: #fff8f0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-radius:  8px 8px;
}
.menu_text p{
    vertical-align: middle;
    color: #999;
    font-size: 12px;
    display: inline-block;
}

 /* 两个选择，二维码，下面的东西*/
.menu_cent{
    /*background-color: blue;*/

    /*border-radius: 8px 8px 8px 8px;*/
    width: 344px;
    height: auto;
}

/*菜单扫码登录和账号登录*/
.menu_chose{
    display: flex;
    justify-content: center;
    align-items: center;

}

.menu_chose div{
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: darkorange;*/
    //width: 173px;
    height: 55px;
    /*两个选择的  底线*/
    border-bottom: 1px solid #f4f4f4;
    font-family: Arial, Verdana, "宋体";
    font-style: unset;
}
.menu_chose div a{
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}
.menu_chose div a:hover{
    font-weight: 700;
    color: #e4393c;
}
/*竖线的css*/
#menu_boder{
     width: 0.5px;
     height: 25px;
     background-color: #666;
 }


/*---------------底部模块------------------*/
/*底部位置*/
.menu_bottom{

    /*弹性布局*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*底部灰线*/
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #f4f4f4;
    background-color: #fcfcfc;
    font: 12px/150% Arial,Verdana,"\5b8b\4f53";
    color: #666;
    /*border-bottom-radius: 8px;*/
}

.menu_bottom_img{
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu_bottom_img div{
    /*弹性布局QQ和微信图片*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: 77px;
    height: 50px;
    /*background-color: #aeb06d;*/
}
.menu_bottom_img div a{
    text-decoration: none;
}
.menu_bottom_img div a:hover{
    color: #E4393C;
    text-decoration: underline;
}
.menu_bottom_img #qq{
    display: block;
    width: 19px;
    height: 18px;
    background-image: url("@/assets/QQ-weixin.png");
}
.menu_bottom_img #weixin{
    display: block;
    width: 19px;
    height: 18px;
    background-position: -20px 0;
    background-image: url("@/assets/QQ-weixin.png");
}

.menu_bottom_img em{
    font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}
.menu_bottom_enroll{
    display: flex;
    align-items: center;
    width: 77px;
    height: 55px;
}
.menu_bottom_enroll div{
    display: flex;
    align-items: center;
}

.menu_bottom_enroll b{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("@/assets/pwd-icons-new.png") -104px -75px no-repeat;;
}
.menu_bottom_enroll a{
    text-decoration: none;
}
.menu_bottom_enroll a:hover{
    color: #E4393C;
    text-decoration: underline;
}
.menu_bottom_enroll en{
    font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}
</style>